<template>
  <div >
    <!--    <el-button @click="add">加一项</el-button>-->
    <span style="color:#409EFF;cursor: pointer;user-select:none;"  @click="add">
      <i class="el-icon-circle-plus-outline" ></i>
      <span>添加一列</span>
    </span>
    <div v-for="(item,index) in this.optionModel.tablesOBJ" :key="item.id" class="box" style="border-bottom:1px solid rgb(221 221 221)">
      <div style="">
        <el-form-item label="表头名称" >
          <el-input
              type="text"
              v-model="item.title"
              placeholder="如：日期、备注"
              @change="inputChange(item)"
          ></el-input>
        </el-form-item>
        <el-form-item label="表头宽度" >
          <el-input
              type="text"
              v-model="item.tableWidth"
              @change="inputChange(item)"
              placeholder="如：100、200"
          ></el-input>
        </el-form-item>
        <el-form-item label="英文名称"  style="display: none">
          <el-input
              type="text"
              v-model="item.dataKey"
          ></el-input>
        </el-form-item>
      </div>
      <div>
        <i class="el-icon-delete" style="font-size: 20px;cursor: pointer;margin-left: 10px" @click="remove(index)"></i>
      </div>
    </div>
  </div>
</template>

<script>
import propertyMixin from "@/components/form-designer/setting-panel/property-editor/propertyMixin"
export default {
  name: "tableForm-editor",
  mixins: [propertyMixin],
  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
  },
  data() {
    return {
      num:5,
      dataOptions:[
        {id:'1', dataKey: 'name1719904802', title: '名称1', tableWidth:'',},
        {id:'2', dataKey: 'name1719904805', title: '名称2', tableWidth:'',},
        {id:'3', dataKey: 'name1719904811', title: '名称3', tableWidth:'',},
      ],
      // nameRequiredRule: [{required: true, message: 'name required'}],
    }
  },
  mounted() {
    // this.optionModel.tablesOBJ = this.dataOptions
  },
  methods:{
    add(){
      //生成当前时间戳
      let timestamp = new Date().getTime();
      this.optionModel.tablesOBJ.unshift({ dataKey: 'name'+timestamp, title: '',id:timestamp ,tableWidth:'' })
    },
    inputChange(){
      // console.log('打印dataOptions',this.dataOptions)
      // this.optionModel.tablesOBJ = this.dataOptions
    },
    inputChanges(){
      // console.log('打印',this.dataOptions)
      this.optionModel.tablesOBJ = this.dataOptions

    },
    remove(index){
      if(this.optionModel.tablesOBJ.length === 1){
        this.$message.error('至少保留一个表头')
        return
      }
      this.optionModel.tablesOBJ.splice(index,1)
      // this.updateData()
    },
    updateData(){
      this.optionModel.tablesOBJ = this.dataOptions

    }
  }
}
</script>

<style scoped>
.html-content-editor {
  font-size: 14px;
}
.box{
  display: flex;
  align-items: center;
  margin-bottom: 3px;
}
</style>